﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChatRoom.aspx.cs" Inherits="MyWCF.Demo.Client.Web.ChatRoom" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="all" href="css/screen.css" />

    <script type="text/javascript" src="js/extend.js"></script>

    <script type="text/javascript" src="js/common.js"></script>

    <script type="text/javascript" src="js/jquery-vsdoc.js"></script>

    <style type="text/css">
        </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container" id="div_login">
        用户名：
        <input type="text" id="txt_userName" />
        <select id="sel_chatRoomList">
        </select>
        <input type="button" value="Login" id="btn_Login" />
    </div>
    <div class="container" id="div_chatRoom" style="display: none">
        <div class="span-23" style="text-align: center">
            ChatRoom Title</div>
        <hr />
        <div class="span-5" id="div_ReadOnlyUsers">
            readonlyUserList
        </div>
        <div class="span-13 box" id="div_Messages" style=" overflow:scroll; height:300px;">
            <p>
                message</p>
            <p>
                message</p>
            <p>
                message</p>
            <p>
                message</p>
            <p>
                message</p>
            <p>
                message</p>
            <p>
                message</p>
            <p>
                message</p>
        </div>
        <div class="span-4">
            right</div>
        <hr />
        <div id="div_sendMessageArea">
            <div class="span-5" id="div_users">
                users
            </div>
            <div class="span-13">
                <textarea style="width: 400px; height: 100px;" id="txt_messages"></textarea>
                <input type="button" value="Send" id="btn_send" />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

<script type="text/javascript">
    (function() {
        var ChatRoomManager = {};
        ChatRoomManager.url = {};
        ChatRoomManager.url.chartRoomList = "GetChatRoomList.ashx";

        ChatRoomManager.id = {};
        ChatRoomManager.id.loginDiv = "div_Login";
        ChatRoomManager.id.chatRoomDiv = "div_chatRoom";
        ChatRoomManager.userList = [];
        ChatRoomManager.current = {};
        ChatRoomManager.current.userId = 0;
        ChatRoomManager.current.chatRoomId = 0;
        ChatRoomManager.current.lastMessageId = 0;
        ChatRoomManager.loadUsers = function(chatRoomId) {
            function getData() {
                $.post("GetChatRoomUserList.ashx"
                , { ChatRoomId: chatRoomId }
                , function(jsonData) {
                    for (var i = 0, len = jsonData.length; i < len; i++) {
                        var obj = jsonData[i];
                        if (!jDoc("p_chatroom_user_" + obj["UserId"])) {
                            var p = document.createElement("p");
                            p.id = "p_chatroom_user_" + obj["UserId"];
                            p.innerHTML = obj["UserName"];
                            if (obj["ReadOnly"] == 1) {
                                jDoc("div_ReadOnlyUsers").appendChild(p);
                            } else {
                                jDoc("div_users").appendChild(p);
                            }
                        }
                    }

                }, "json");
            }
            getData();
            setInterval(getData, 1000 * 2)
        }
        ChatRoomManager.loadMessage = function() {
            function getData() {
                $.post("GetChatRoomMessage.ashx"
                , { lastMessageId: ChatRoomManager.current.lastMessageId
                , chatRoomId: ChatRoomManager.current.chatRoomId
                , userId: ChatRoomManager.current.userId
                }
                , function(jsonData) {
                    for (var i = 0, len = jsonData.length; i < len; i++) {
                        var obj = jsonData[i];
                        if (!jDoc("p_chatroom_msg_" + obj["MessageId"])) {
                            var p = document.createElement("p");
                            p.id = "p_chatroom_msg_" + obj["MessageId"];
                            p.innerHTML = obj["Message"];
                            jDoc("div_Messages").appendChild(p);
                        }
                    }
                    if (len > 0) {
                        ChatRoomManager.current.lastMessageId = jsonData[len - 1]["MessageId"];
                        jDoc("p_chatroom_msg_" + ChatRoomManager.current.lastMessageId).scrollIntoView(true);
                    }
                }, "json");
            }
            getData();
            setInterval(getData, 1000 * 2)
        }
        ChatRoomManager.bindEvent = function() {
            $(jDoc("btn_Login")).bind("click", function() {
                var userName = jDoc("txt_userName");
                var chatRoom = jDoc("sel_chatRoomList");
                if (userName.value.trim() == "") {
                    alert("请输入用户名");
                    return;
                }
                if (chatRoom.selectedIndex < 0) {
                    alert("请选择聊天室");
                    return;
                }
                $.post("EnterChatRoom.ashx"
                , { ChatRoomId: chatRoom.options[chatRoom.selectedIndex].value, UserName: userName.value }
                , function(jsonData) {
                    ChatRoomManager.current.userId = jsonData["UserId"];
                    ChatRoomManager.current.userName = jsonData["UserName"];
                    ChatRoomManager.current.chatRoomId = jsonData["ChatRoomId"];
                    ChatRoomManager.loadUsers(ChatRoomManager.current.chatRoomId);
                    ChatRoomManager.loadMessage();
                    $(jDoc("div_login")).slideUp("fast");
                    $(jDoc("div_chatRoom")).slideDown("slow");

                }, "json");
            })
            $(jDoc("btn_send")).bind("click", function() {
                var message = jDoc("txt_messages");
                if (message.value.trim() == "") {
                    alert("请输入信息");
                    return;
                }
                $.post("AddChatRoomMessage.ashx"
                , { UserId: ChatRoomManager.current.userId
                , ChatRoomId: ChatRoomManager.current.chatRoomId
                , Message: message.value
                }
                , function() {
                    message.value = "";
                    alert("OK")
                }, "json")
            });
        }
        ChatRoomManager.init = function() {
            $.post("GetChatRoomList.ashx"
                , function(jsonData) {
                    var chatRoom = jDoc("sel_chatRoomList");
                    for (var i = 0, dLen = jsonData.length; i < dLen; i++) {
                        var obj = jsonData[i];
                        chatRoom.options[i] = new Option(obj["Title"], obj["ChatRoomId"]);
                    }
                }, "json");
            ChatRoomManager.bindEvent();
        }
        ChatRoomManager.init();
    })();
    
    
</script>

